<template>
  <div className="row">

    <!--        页头-->
    <div class="col-12 head1">
      <card>
        <div class="row" >
          <span class="deco"></span>
          <h2 class="clearMargin">面向对象程序设计（Java）</h2>

          <!--          <a href="#/detail-add" target="_blank" class="card-img-top" style="float: right">-->
          <el-button style="margin-left: 45rem;" type="primary" @click="show3 = !show3">点击切换课程</el-button>
          <!--          </a>-->

        </div>
      </card>
    </div>


    <div style="margin-top: 20px; position: relative;">
      <el-collapse-transition>
        <div v-show="show3" style="position: absolute; z-index: 2;">
          <div class="col-12">
            <CourseMenu/>
          </div>
        </div>
      </el-collapse-transition>
    </div>

    <div class="col-12" style="position: relative; z-index: 1;">
      <card>


      </card>
    </div>

  </div>

</template>

<style scoped>
.card-title {
  margin-bottom: 0.2rem !important;
  font-weight: 400 !important;
}

</style>

<style>
//下拉菜单
.transition-box {
//margin-bottom: 10px;
//width: 200px;
//height: 100px;
//border-radius: 4px;
//background-color: #409EFF;
//text-align: center;
//color: #fff;
//padding: 40px 20px;
//box-sizing: border-box;
//margin-right: 20px;
}

.class-menu{
//background-color: rgb(255, 255, 255) !important;
  height: 32rem;
  width: 71rem;
}

.table > thead > tr > th {
  font-size: 14px !important;
}

.clearMargin {
  margin-bottom: 0.5rem;
}

.deco {
  margin: 0 1rem;
  height: 2.5rem;
  width: 5px;
  background-color: #1f86f6;
}

.head1{
  margin-bottom: -20px!important;
}
</style>

<script>
import {reactiveData as table1} from "vue-chartjs/es/mixins";
import BaseTable from "../components/BaseTable.vue";
import Card from "../components/Cards/Card.vue";
import baseButton from "../components/BaseButton.vue";
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from "vue";
import CoursesManage from "./CoursesManage.vue";
import CourseMenu from "./CourseMenu.vue";
// import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
Vue.component(CollapseTransition.name, CollapseTransition)
export default {
  components: {
    CourseMenu,
    CoursesManage,
    BaseTable,
    Card,
    baseButton,
  },
  data() {
    return {
      show3: false,

    };
  },
  props: {
    model: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>
